<template>
  <div class="overview-content">
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="24" class="chart-wrapper" style="margin-bottom:20px;">
        <div>
          <el-button
            class="filter-item"
            type="primary"
            style="margin-right:auto;"
            @click="addReportClick"
          >新增</el-button>
        </div>
      </el-col>

      <myModal :obj="obj" @close="close" @save="save">
        <div class="mpdalBody">
          <el-form ref="form" :model="postForm" label-width="65px" class="formDiv">
            <el-col :xs="12" :sm="12" :lg="12" class="mtright">
              <el-form-item label="货币:" :span="24">
                <el-select v-model="value" value-key="name" placeholder="请选择货币" @change="getRemoteStateList">
                  <el-option
                    v-for="item in currencyOptions"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="12" class="mtright">
              <el-form-item label="汇率:" :span="24">
                <el-input v-model.number="postForm.rate" onkeyup="this.value = this.value.replace(/[^\d.]/g,'');" placeholder="输入汇率" />
              </el-form-item>
            </el-col>
          </el-form>
        </div>
      </myModal>
      <!---->

      <el-table
        :data="tableData"
        style="width: 100%"
        class="card-table"
        :border="false"
        stripe
        :default-sort="{prop: 'five'}"
      >
        <el-table-column
          show-overflow-tooltip
          prop="ID"
          label="ID"
          min-width="50"
          type="index"
          align="center"
        />
        <el-table-column
          show-overflow-tooltip
          label="货币"
          min-width="50%"
          prop="currency"
          :formatter="currencyFormat"
          align="center"
        />
        <el-table-column
          show-overflow-tooltip
          prop="rate"
          label="汇率"
          min-width="50%"
          align="center"
        />
        <el-table-column
          show-overflow-tooltip

          label="操作"
          align="center"
          width="150"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              class="linkBtn"
              @click="handleClick(scope.row, 1)"
            >编辑</el-button>
            <el-button
              type="text"
              size="small"
              class="linkBtn"
              @click="delClick(scope.row, 2)"
            >删除</el-button>
          </template>
        </el-table-column>

      </el-table>

    </el-row>
    <!---->
    <myModal :obj="deleteobj" @close="close" @save="deleteHouse">
      <div class="mpdalBody">
        <span style="display:block;text-align:center">确定要删除该汇率吗？</span>
      </div>
    </myModal>
    <!---->
  </div>
</template>

<script>
import { rateAdd, getRateList, delRate } from '@/api/houseView'
import myModal from '@/components/Modal'
import { currencyOptions } from '@/utils/consts'
import { currencyFormat } from '@/utils/common'
export default {
  components: {
    myModal
  },
  data() {
    return {
      id: '',
      value: '',
      obj: {
        show: false,
        title: '新增汇率',
        width: '647px'
      },
      deleteobj: {
        show: false,
        title: '删除汇率',
        width: '447px'
      },
      postForm: {

      },
      currencyOptions,
      currencyFormat,
      tableData: [],
      listQuery: {
        page: 1,
        limit: 10
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    handleClick(row) {
      this.obj.title = '编辑汇率'
      this.postForm = JSON.parse(JSON.stringify(row))
      this.value = row.currency
      this.obj.show = true
    },
    delClick(row) {
      this.id = row.id
      this.deleteobj.show = true
    },
    deleteHouse() {
      delRate(this.id).then(response => {
        this.$notify.success({ message: '删除成功' })
        this.init()
        this.deleteobj.show = false
      })
    },
    init() {
      getRateList(this.listQuery).then(response => {
        this.tableData = response.data.records
      })
    },
    addReportClick() {
      this.postForm = {}
      this.value = ''
      this.obj.title = '新增汇率'
      this.obj.show = true
    },
    close(val) {
      this.obj.show = val
      this.deleteobj.show = val
      this.init()
    },
    getRemoteStateList(data) {
      console.log(data)
    },
    save() {
      this.postForm.currency = this.value
      // this.postForm.rate = this.postForm.rate * 1
      rateAdd(this.postForm).then(response => {
        if (response.code === 200) {
          this.$notify.success({ message: '保存成功' })
          console.log(' delete response:', response)
          //  this.$router.push('/house/page')
          this.init()
          this.close()
          this.postForm = {
            rate: ''
          }
          this.value = ''
        } else {
          this.postForm = {
            rate: null
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.chart-wrapper{text-align: right;}
.mpdalBody{overflow: hidden;}
::v-deep .el-table th.is-leaf,
::v-deep .el-table td,
::v-deep .el-table__body {
  border: 0;
}
::v-deep .el-table::before,
::v-deep .el-table__fixed-right::before {
  display: none;
}
::v-deep th {
  background: #f7f7f7;
  font-weight: normal;
  color: #101010;
}
</style>

